<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<div class="test" 
				v-bind:class="{active:isActive ,green:isGreen}"
				style="width:200px;height: 200px;text-align: center;
				line-height: 200px;">
				Hi vue
			</div>
			<div
			:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
			hi vue
			</div>
			<div style="color: blue;background-color: aquamarine;">
				hello world
				
			</div>
		</div>
		
		<script>
		var vm = new Vue({
			el:"#app",
			data:{
				isActive:true,
				isGreen:true,
				color:'#ffffff',
				size:'55px',
				isRed:true
			}
		})
		</script>
		
		<style type="text/css">
			.test{font-size: 30px;}
			.green{color: #0000FF;}
			.active{background:#FF0000;}
		</style>
		
	</body>
</html>
